<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="card" ref="card">
		  <view>
		    <text class="text" @click="timerShow = true">{{searchData.timer}}</text>
		  </view>
		  <view class="select_client">
			<u--input placeholder="客户编号" border="surround"></u--input>
		  </view>
		</view>
		
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
		             @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
		             :style="{height: `${screenHeight}px`}">
		
		  <view v-if="listData.length === 0" :style="{paddingTop: `${screenHeight / 4}px`}">
		    <u-empty mode="list" />
		  </view>
		
		  <u-cell  v-for="item in listData" :key="item.id" :title="item.name">
		  </u-cell>
		</scroll-view>
		
		<u-datetime-picker
		    :show="timerShow"
		    v-model="searchData.timer"
		    mode="datetime"
		    @close="timerShow = false"
		    @confirm="timerShow = false"
		    @cancel="timerShow = false"
		></u-datetime-picker>
		
		<u-popup :show="show" mode="right" overlayOpacity="0.3" @close="show = false">
			<view class="pop-view">
				<view>
					<u-cell title="单号">
						<view slot="value">
							<u--input placeholder="请输入单号" border="surround"></u--input>
						</view>
					</u-cell>
					<u-cell title="产品"></u-cell>
					<u-cell title="业务员"></u-cell>
					<u-cell title="销售类别"></u-cell>
					<u-cell title="提货"></u-cell>
					<u-cell title="隐藏已审核单据">
						<view slot="value">
							<u-switch></u-switch>
						</view>
					</u-cell>
					<u-cell title="隐藏已打印单据">
						<view slot="value">
							<u-switch></u-switch>
						</view>
					</u-cell>
				</view>
				<view class="fot-btn flex flex-sw p-l-10 p-r-10">
					<u-button text="重置" shape="circle" class="reset m-r-10"></u-button>
					<u-button text="搜索" shape="circle"
						color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'sales-label',
		data() {
			return {
				config: {
					title: "销售订单",
					color: "#ffffff",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
					rightButton: [{
						key: "btn1",
						icon: "&#xe888;",
						position: "left",
					}, ],
				},
				show: false,
				timerShow: false,
				searchData: {
				  timer: Number(new Date()),
				},
				listData: [],
				pageInfo: {
				  current: 1, // 当前页
				  size: 15, // 每页数据条数
				  order: 'desc', // 排序方向
				},
				pageLoading: false,
				triggered: false,
				screenHeight: 0
			}
		},
		mounted() {
		  const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.card.$el.offsetHeight * 1.1);
		  const sysInfo = uni.getSystemInfoSync()
		  this.screenHeight = sysInfo.windowHeight - height
		},
		methods: {
			clickBtn(item) {
				if (item.key === "btn1") {
					this.show = true
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.pop-view {
		width: 500rpx;
		padding-top: 90rpx;

		.fot-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: 20rpx;
		}

		.reset {
			color: #409eff;
			background-color: #e3edff;
		}
	}
	
	.card {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 10rpx 20rpx;
	  background-color: #FFFFFF;
	  border-bottom: 1rpx solid #dddddd;
	}
	
	.select_client {
	  display: flex;
	  align-items: center;
	}
	
	.card .text {
	  font-size: 24rpx;
	  color: #757575;
	  letter-spacing: 1rpx;
	}
</style>